<template>
    <div class="zh-ebrochure-title">
        <div class="title-box display-flex align-end">
        <div class="title-box-left display-flex align-end">
            <div class="decorate">
                <img class="decorate-02 animate__animated rollInLeft" src="@/assets/images/ebrochure/2.webp"/>
                <img class="decorate-01 animate__animated rollInLeft" src="@/assets/images/ebrochure/1.webp"/> 
            </div>
            <img class="decorate-title-e animate__animated animate__slideInLeft" src="@/assets/images/ebrochure/title_e.png" v-if="props.type === '2'"/>
            <div class="title animate__animated animate__slideInLeft" :style="[props.type === '2'?'color:#B39B77':'color:#2386E3']">{{ props.title }}</div>  
        </div>
        <div class="en-title animate__animated animate__fadeIn" :style="[props.type === '2'?'color:#B39B77':'color:#2386E3']">/{{ props.enTitle }}</div>
        </div>
        <div class="decorate-line" >
            <div class="decorate-line-border animate__animated animate__zoomIn" :style="[props.type === '2'?'background:#B39B77':'background:#2386E3']"></div>
            <div class="decorate-line-start animate__animated animate__fadeIn animate__delay-1s" :style="[props.type === '2'?'background:#B39B77':'background:#2386E3']"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import 'animate.css'
    const props = defineProps<{
        title: string
        enTitle:string
        type?:string
    }>()
</script>
<style>
    @-webkit-keyframes rollInLeft {
        from {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -360deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -360deg);
        }
    
        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    
    @keyframes rollInLeft {
        from {
            opacity: 0;
            -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -360deg);
            transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -360deg);
        }
    
        to {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    
    .rollInLeft {
        -webkit-animation-name: rollInLeft;
        animation-name: rollInLeft;
    }
</style>
<style lang="scss" scope>
.zh-ebrochure-title {
    .title-box {
        .title-box-left {
            position:relative;
            .decorate {
                width:85px;
                .decorate-01 {
                    width:54px;
                    height:54px;
                    position:absolute;
                    left:0;
                    bottom:0;
                }
                .decorate-02 {
                    width:54px;
                    height:54px;
                    position:absolute;
                    left:30px;
                    bottom:0;
                }
            }
            .decorate-title-e {
                width:77px;
                height:83px;
                margin-left:14px;
            }
            .title {
                font-size:54px;
                color:#2386E3;
                line-height:54px;
                margin-left:14px;
            }
            }
            .en-title {
            font-size:28px;
            color:#2386E3;
            margin-left:17px;
            }
            
        }
        .decorate-line {
            position:relative;
            margin-top: 27px;

            .decorate-line-border {
            width:100%;
            background:#2386E3;
            height:1px;
            }
            .decorate-line-start {
            width: 28px;
            height: 8px;
            background: #2386E3;
            position:absolute;
            top:-4px;
            }
        }
    }
</style>